<template>
    <page-layout class="page-layout">
        <!-- 基础组件 -->
        <app-menu-module title="基础组件">
            <pure-cell
                class="cell"
                v-for="cell in componentsBase"
                :key="cell.title"
                :iconName="cell.icon"
                :title="cell.title"
                :desc="cell.desc"
                hover-class="pure-hover"
                @tap="handleCellClick(cell)"
            ></pure-cell>
        </app-menu-module>

        <!-- 布局组件 -->
        <app-menu-module title="布局组件">
            <pure-cell
                class="cell"
                v-for="cell in componentsLayout"
                :key="cell.title"
                :iconName="cell.icon"
                :title="cell.title"
                :desc="cell.desc"
                hover-class="pure-hover"
                @tap="handleCellClick(cell)"
            ></pure-cell>
        </app-menu-module>

        <!-- 数据展示组件 -->
        <app-menu-module title="数据展示组件">
            <pure-cell
                class="cell"
                v-for="cell in componentsData"
                :key="cell.title"
                :iconName="cell.icon"
                :title="cell.title"
                :desc="cell.desc"
                hover-class="pure-hover"
                @tap="handleCellClick(cell)"
            ></pure-cell>
        </app-menu-module>

        <!-- 表单组件 -->
        <app-menu-module title="表单组件">
            <pure-cell
                class="cell"
                v-for="cell in componentsForm"
                :key="cell.title"
                :iconName="cell.icon"
                :title="cell.title"
                :desc="cell.desc"
                hover-class="pure-hover"
                @tap="handleCellClick(cell)"
            ></pure-cell>
        </app-menu-module>

        <!-- 状态组件 -->
        <app-menu-module title="状态组件">
            <pure-cell
                class="cell"
                v-for="cell in componentsStatus"
                :key="cell.title"
                :iconName="cell.icon"
                :title="cell.title"
                :desc="cell.desc"
                hover-class="pure-hover"
                @tap="handleCellClick(cell)"
            ></pure-cell>
        </app-menu-module>

        <!-- 交互组件 -->
        <app-menu-module title="交互组件">
            <pure-cell
                class="cell"
                v-for="cell in componentsInteractive"
                :key="cell.title"
                :iconName="cell.icon"
                :title="cell.title"
                :desc="cell.desc"
                hover-class="pure-hover"
                @tap="handleCellClick(cell)"
            ></pure-cell>
        </app-menu-module>

        <!-- 导航组件 -->
        <app-menu-module title="导航组件">
            <pure-cell
                class="cell"
                v-for="cell in componentsNavs"
                :key="cell.title"
                :iconName="cell.icon"
                :title="cell.title"
                :desc="cell.desc"
                hover-class="pure-hover"
                @tap="handleCellClick(cell)"
            ></pure-cell>
        </app-menu-module>

        <!-- 媒体组件 -->
        <app-menu-module title="媒体组件">
            <pure-cell
                class="cell"
                v-for="cell in componentsMedia"
                :key="cell.title"
                :iconName="cell.icon"
                :title="cell.title"
                :desc="cell.desc"
                hover-class="pure-hover"
                @tap="handleCellClick(cell)"
            ></pure-cell>
        </app-menu-module>

        <!-- 其他组件 -->
        <app-menu-module title="其他组件">
            <pure-cell
                class="cell"
                v-for="cell in componentsOther"
                :key="cell.title"
                :iconName="cell.icon"
                :title="cell.title"
                :desc="cell.desc"
                hover-class="pure-hover"
                @tap="handleCellClick(cell)"
            ></pure-cell>
        </app-menu-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";

    // 基础组件
    const componentsBase = ref([
        { icon: "/static/icons/icon.png", title: "图标", desc: "Icon", pagePath: "/pages/icon/index" },
        { icon: "/static/icons/cell.png", title: "单元格", desc: "Cell", pagePath: "/pages/cell/index" },
        { icon: "/static/icons/button.png", title: "按钮", desc: "Button", pagePath: "/pages/button/index" },
        { icon: "/static/icons/link.png", title: "超链接", desc: "Link", pagePath: "/pages/link/index" },
    ]);

    // 布局组件
    const componentsLayout = ref([
        { icon: "/static/icons/layout.png", title: "布局", desc: "Layout", pagePath: "/pages/layout/index" },
        { icon: "/static/icons/block.png", title: "块元素", desc: "Block", pagePath: "/pages/block/index" },
        { icon: "/static/icons/gap.png", title: "间隔", desc: "Gap", pagePath: "/pages/gap/index" },
    ]);

    // 数据展示组件
    const componentsData = ref([
        { icon: "/static/icons/badge.png", title: "徽标", desc: "Badge", pagePath: "/pages/badge/index" },
        { icon: "/static/icons/tag.png", title: "标签", desc: "Tag", pagePath: "/pages/tag/index" },
        { icon: "/static/icons/waterfall.png", title: "瀑布流", desc: "Waterfall", pagePath: "/pages/waterfall/index" },
        { icon: "/static/icons/swiper.png", title: "轮播", desc: "Swiper", pagePath: "/pages/swiper/index" },
        { icon: "/static/icons/indicator.png", title: "轮播指示器", desc: "Indicator", pagePath: "/pages/indicator/index" },
        { icon: "/static/icons/prev-next.png", title: "前进后退切换器", desc: "PrevNext", pagePath: "/pages/prev-next/index" },
        { icon: "/static/icons/amount.png", title: "金额", desc: "Amount", pagePath: "/pages/amount/index" },
    ]);

    // 表单组件
    const componentsForm = ref([
        { icon: "/static/icons/form.png", title: "表单", desc: "Form", pagePath: "/pages/form/index" },
        { icon: "/static/icons/field.png", title: "字段", desc: "Field", pagePath: "/pages/field/index" },
        { icon: "/static/icons/radio.png", title: "单选", desc: "Radio", pagePath: "/pages/radio/index" },
        { icon: "/static/icons/checkbox.png", title: "多选", desc: "Checkbox", pagePath: "/pages/checkbox/index" },
        { icon: "/static/icons/switch.png", title: "开关选择器", desc: "Switch", pagePath: "/pages/switch/index" },
        { icon: "/static/icons/step.png", title: "步进器", desc: "Step", pagePath: "/pages/step/index" },
        { icon: "/static/icons/input.png", title: "输入框", desc: "Input", pagePath: "/pages/input/index" },
        { icon: "/static/icons/textarea.png", title: "多行输入框", desc: "Textarea", pagePath: "/pages/textarea/index" },
        { icon: "/static/icons/code-countdown.png", title: "验证码倒计时", desc: "CodeCountdown", pagePath: "/pages/code-countdown/index" },
        { icon: "/static/icons/code-input.png", title: "验证码输入框", desc: "CodeInput", pagePath: "/pages/code-input/index" },
        { icon: "/static/icons/search.png", title: "搜索", desc: "Search", pagePath: "/pages/search/index" },
    ]);

    // 状态组件
    const componentsStatus = ref([
        { icon: "/static/icons/loading.png", title: "加载", desc: "Loading", pagePath: "/pages/loading/index" },
        { icon: "/static/icons/loadmore.png", title: "加载更多", desc: "LoadMore", pagePath: "/pages/loadmore/index" },
        { icon: "/static/icons/empty.png", title: "空状态", desc: "Empty", pagePath: "/pages/empty/index" },
    ]);

    // 交互组件
    const componentsInteractive = ref([
        { icon: "/static/icons/overlay.png", title: "遮罩层", desc: "Overlay", pagePath: "/pages/overlay/index" },
        { icon: "/static/icons/popup.png", title: "弹出层", desc: "Popup", pagePath: "/pages/popup/index" },
        { icon: "/static/icons/modal.png", title: "对话框", desc: "Modal", pagePath: "/pages/modal/index" },
        { icon: "/static/icons/notice-bar.png", title: "滚动通知", desc: "NoticeBar", pagePath: "/pages/notice-bar/index" },
        { icon: "/static/icons/calendar.png", title: "日历", desc: "Calendar", pagePath: "/pages/calendar/index" },
        { icon: "/static/icons/cascader.png", title: "级联选择器", desc: "Cascader", pagePath: "/pages/cascader/index" },
        { icon: "/static/icons/relation-select.png", title: "关联选择器", desc: "RelationSelect", pagePath: "/pages/relation-select/index" },
    ]);

    // 导航组件
    const componentsNavs = ref([
        { icon: "/static/icons/tabs.png", title: "选项卡", desc: "Tabs", pagePath: "/pages/tabs/index" },
        { icon: "/static/icons/navbar.png", title: "导航栏", desc: "NavBar", pagePath: "/pages/navbar/index" },
        { icon: "/static/icons/tabbar.png", title: "标签栏", desc: "TabBar", pagePath: "/pages/tabbar/index" },
    ]);

    // 媒体组件
    const componentsMedia = ref([{ icon: "/static/icons/image.png", title: "图片", desc: "Image", pagePath: "/pages/image/index" }]);

    // 其他组件
    const componentsOther = ref([{ icon: "/static/icons/avatar.png", title: "头像", desc: "Avatar", pagePath: "/pages/avatar/index" }]);

    // 菜单点击事件
    function handleCellClick(cell) {
        uni.navigateTo({
            url: cell.pagePath,
        });
    }
</script>

<style scoped lang="scss">
    .cell {
        background: #f8f8f8;
        border-radius: 5px;
        margin: 6px 0;
    }
</style>
